<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
    <script src="angular1.3.min.js" type="text/javascript"></script>
    <style>

        .expander {
            border: 1px solid black;
            width: 250px;
        }

        .expander>.title {
            background-color: black;
            color: white;
            padding: .1em .3em;
            cursor: pointer;
        }

        .expander>.body {
            padding: .1em .3em;
        }
    </style>
 </head>
<body>

<html ng-app="expanderModule">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="../angular-1.0.3/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Accordion.css"/>
</head>
<body ng-controller='SomeController' >

<div ng-include="'tmp.html'" class="well"></div>


<accordion>
    <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
        {{expander.text}}
    </expander>
</accordion>
</body>
<script src="Accordion.js"></script>
</html>

</body>
</html>

<script>
    var expModule=angular.module('expanderModule',[])
    expModule.directive('accordion', function() {
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            template : '<div ng-transclude></div>',
            controller : function() {
                var expanders = [];
                this.gotOpened = function(selectedExpander) {
                    angular.forEach(expanders, function(expander) {
                        if (selectedExpander != expander) {
                            expander.showMe = false;
                        }
                    });
                }
                this.addExpander = function(expander) {
                    expanders.push(expander);
                }
            }
        }
    });

    expModule.directive('expander', function() {
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            require : '^?accordion',
            scope : {
                title : '=expanderTitle'
            },
            template : '<div>'
                    + '<div class="title" ng-click="toggle()">{{title}}</div>'
                    + '<div class="body" ng-show="showMe" ng-transclude></div>'
                    + '</div>',
            link : function(scope, element, attrs, accordionController) {
                scope.showMe = false;
                accordionController.addExpander(scope);
                scope.toggle = function toggle() {
                    scope.showMe = !scope.showMe;
                    accordionController.gotOpened(scope);
                }
            }
        }
    });

    expModule.controller("SomeController",function($scope) {
        $scope.expanders = [{
            title : 'Click me to expand',
            text : 'Hi there folks, I am the content that was hidden but is now shown.'
        }, {
            title : 'Click this',
            text : 'I am even better text than you have seen previously'
        }, {
            title : 'Test',
            text : 'test'
        }];
    });

</script>
